<template>
    <el-card>
        <el-form>
            <el-form-item>
                <el-input placeholder="角色名称" style="width:200px;margin-right:10px" />
                <el-button type="primary">查询</el-button>
                <el-button>清空</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="primary">添加</el-button>
                <el-button type="danger">批量删除</el-button>
            </el-form-item>
        </el-form>
        <el-table border :data="roleList" style="width: 960px">
            <el-table-column type="selection" width="55px" />
            <el-table-column type="index" label="序号" width="80px" align="center" />
            <el-table-column label="角色名称" prop="roleName" />
            <el-table-column label="操作">
                <template v-slot="{ row }">
                    <el-button type="info" :icon="InfoFilled" size="small"></el-button>
                    <el-button type="primary" :icon="Check" size="small"></el-button>
                    <el-button type="primary" :icon="Edit" size="small"></el-button>
                    <el-button type="danger" :icon="Delete" size="small" @click="open(row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:currentPage="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 15, 20, 25]"
            :small="small" :disabled="disabled" :background="background"
            layout=" prev, pager, next, jumper,->, sizes,total" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
    </el-card>
</template>

<script lang="ts">
export default {
    name: 'Role'
}
</script>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Check, Edit, Delete, InfoFilled } from '@element-plus/icons-vue'
import { reqGetRoleSaveList, reqDeleteBatchRemoveOne } from '@/api/acl/role'
import { ElMessageBox, ElMessage } from 'element-plus'
const currentPage = ref(1)
const pageSize = ref(5)
const total = ref(20)

const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const roleList = ref([])

const getRoleList = async () => {
    const result = await reqGetRoleSaveList(currentPage.value, pageSize.value)
    // console.log(result.items);
    total.value = result.total
    roleList.value = result.items
}
const handleSizeChange = (val: number) => {
    pageSize.value = val
    currentPage.value = 1
    getRoleList()
}
const handleCurrentChange = (val: number) => {
    currentPage.value = val
    getRoleList()
}
onMounted(() => {
    getRoleList()
})

const open = (row: any) => {
    ElMessageBox.confirm(
        `确定要删除${row.roleName}吗?`,
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            draggable: true,
        }
    )
        .then(async () => {
            await reqDeleteBatchRemoveOne(row.id)
            getRoleList()
            ElMessage({
                type: 'success',
                message: '删除成功',
            })
        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消删除',
            })
        })
}
</script>

<style>
</style>